<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gerrit链接解析工具</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <!-- 引入SheetJS库用于Excel导出 -->
    <script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>

<body>
    <div class="container">
        <header>
            <div class="header-content">
                <i class="fas fa-code-branch header-icon"></i>
                <h1>Gerrit链接解析工具</h1>
            </div>
            <p class="subtitle">快速解析Gerrit代码提交链接，获取变更详情并对变更内容进行异常检测</p>
        </header>

        <section class="input-section">
            <div class="input-group">
                <div class="input-wrapper">
                    <input type="text" id="urlInput"
                        placeholder="请输入Gerrit提交链接，例如：http://gerrit-sh.noboauto.com:8090/.../+/{编号}">
                    <button type="button" id="clearBtn" class="clear-btn" aria-label="清空输入">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <button id="submitBtn" class="btn-primary">
                    <span class="btn-text">解析链接</span>
                    <span class="loading-spinner" style="display: none;"><i class="fas fa-spinner fa-spin"></i></span>
                </button>
            </div>
            <div class="validation-hint" id="validationHint"></div>
            <div id="analysisOptions" class="analysis-options" style=" margin-top: 15px;">
                <div class="option-item">
                    <input type="checkbox" id="enableStaticEngine" checked>
                    <label for="enableStaticEngine">启用静态规则匹配引擎</label>
                </div>
                <div class="option-item">
                    <input type="checkbox" id="ignoreLevelB">
                    <label for="ignoreLevelB">忽略B级（中等风险）问题</label>
                </div>
                <div class="option-item">
                    <input type="checkbox" id="ignoreLevelC">
                    <label for="ignoreLevelC">忽略C级（代码质量）问题</label>
                </div>
            </div>
        </section>

        <section class="result-section" id="resultContainer">
            <!-- 链接分析结果显示 -->
            <div id="connectionResultContainer" class="details-card" style=" white-space: pre-line; ">
                <h3 class="card-title">
                    <i class="fas fa-link card-icon"></i>链接分析结果
                </h3>
                <pre id="connectionResult" class="result-content"></pre>
            </div>

            <!-- 基础信息 -->
            <div id="basicInfoContainer" class="details-card"
                style="display: none; opacity: 0; transform: translateY(10px);">
                <h3 class="card-title">
                    <i class="fas fa-info-circle card-icon"></i>基础信息
                </h3>
                <div class="basic-info-list">
                    <div class="basic-info-item">
                        <strong>编号:</strong>
                        <span id="basicNumber"></span>
                    </div>
                    <div class="basic-info-item">
                        <strong>分支:</strong>
                        <span id="basicBranch"></span>
                    </div>
                    <div class="basic-info-item">
                        <strong>Change ID:</strong>
                        <span id="basicChangeId"></span>
                    </div>
                    <div class="basic-info-item">
                        <strong>创建时间:</strong>
                        <span id="basicCreated"></span>
                    </div>
                    <div class="basic-info-item">
                        <strong>状态:</strong>
                        <span id="basicStatus"></span>
                    </div>
                    <div class="basic-info-item">
                        <strong>标题:</strong>
                        <span id="basicSubject"></span>
                    </div>
                    <div class="basic-info-item">
                        <strong>提交者:</strong>
                        <span id="basicSubmitter"></span>
                    </div>
                </div>
            </div>

            <!-- 文件变动信息 -->
            <div id="filesTableContainer" class="details-card"
                style="display: none; opacity: 0; transform: translateY(10px);">
                <h3 class="card-title">
                    <i class="fas fa-file-code card-icon"></i>文件变动信息
                </h3>
                <div class="table-wrapper">
                    <table class="files-table">
                        <thead>
                            <tr>
                                <th>文件路径</th>
                                <th>插入行数</th>
                                <th>删除行数</th>
                            </tr>
                        </thead>
                        <tbody id="filesTableBody"></tbody>
                    </table>
                </div>
            </div>

            <!-- 工作流返回信息 -->
            <div id="workflowContainer" class="details-card"
                style="display: none; opacity: 0; transform: translateY(10px);">
                <h3 class="card-title">
                    <i class="fas fa-check-circle card-icon"></i>代码审核结果
                </h3>
                <pre id="workflowResults" class="result-content">
                    <span class="highlight-info"></span>
                    <span class="highlight-warning"></span>
                </pre>
                <div class="flex justify-between items-center mb-6">
                    <h4 class="text-lg" style="font-size: 20px; margin-top: 10px;">问题列表</h4>
                    <button id="exportExcelBtn"
                        class="btn-excelBtn flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
                        <i class="fa fa-download"></i>
                        <span>导出Excel</span>
                    </button>
                </div>
                <div id="issuesList" style="margin-top: 40px; display: none;">
                    <div class="table-wrapper" id="issuesTable">
                        <div class="table-filters flex justify-between items-center">
                            <input type="text" class="search-box" placeholder="搜索任何内容...">

                            <div class="filter-group">
                                <select class="filter-select rank-filter">
                                    <option value="">所有等级</option>
                                    <option value="S级">S级</option>
                                    <option value="A级">A级</option>
                                    <option value="B级">B级</option>
                                    <option value="C级">C级</option>
                                </select>
                            </div>

                            <div class="filter-group">
                                <select class="filter-select file-filter">
                                    <option value="">所有文件</option>
                                </select>
                            </div>
                        </div>
                        <table class="files-table" id="data-table">
                            <thead>
                                <tr>
                                    <th data-sort="type">
                                        类型
                                        <i class="fas sort-indicator"></i>
                                    </th>
                                    <th data-sort="rule_id">
                                        规则ID
                                        <i class="fas sort-indicator"></i>
                                    </th>
                                    <th>
                                        描述
                                    </th>
                                    <th>
                                        行范围
                                    </th>
                                    <th data-sort="filename">
                                        文件名称
                                        <i class="fas sort-indicator"></i>
                                    </th>
                                </tr>
                            </thead>
                            <tbody id="analyseTableBody"></tbody>
                        </table>
                    </div>
                    <div class="mt-4 flex justify-between items-center" id="paginationContainer">
                        <div class="text-sm text-neutral-500">
                            显示 <span id="pageRange">1-4</span> 条，共
                            <span id="totalItems">0</span> 条
                        </div>
                        <div class="pagination" id="paginationControls">
                            <button id="prevBtn" class="page-btn">
                                <i class="fas fa-chevron-left"></i> 上一页
                            </button>
                            <div id="page-numbers">
                                <!-- 页码按钮将通过JavaScript动态生成 -->
                            </div>
                            <button id="nextBtn" class="page-btn">
                                下一页 <i class="fas fa-chevron-right"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 问题详情显示抽屉 -->
            <div id="drawerContainer" class="drawer">
                <button id="closeDrawerBtn" class="close-btn" aria-label="关闭抽屉">
                    <i class="fas fa-times"></i>
                </button>
                <div class="drawer-content">
                    <h3 class="drawer-title">问题详情</h3>
                    <div class="detail-item">
                        <h4>文件</h4>
                        <p id="filenameDisplay" class="result-content"></p>
                    </div>
                    <div class="detail-item">
                        <h4>类型</h4>
                        <p id="typeDisplay" class="result-content"></p>
                    </div>
                    <div class="detail-item">
                        <h4>规则ID</h4>
                        <p id="idDisplay" class="result-content"></p>
                    </div>
                    <div class="detail-item">
                        <h4>描述</h4>
                        <p id="descDisplay" class="result-content"></p>
                    </div>
                    <div class="detail-item">
                        <h4>行范围</h4>
                        <pre id="rangeDisplay" class="result-content"></pre>
                    </div>
                    <div class="detail-item">
                        <h4>代码片段</h4>
                        <pre id="snippetPreview" class="result-content code-snippet"></pre>
                    </div>
                    <div class="detail-item">
                        <h4>建议</h4>
                        <p id="suggestTip" class="result-content"></p>
                    </div>
                </div>
            </div>

            <div id="issuesDistributionContainer" class="details-card"
                style="display: none; opacity: 0; transform: translateY(10px);">
                <h3 class="card-title">
                    <i class="fas fa-chart-pie card-icon"></i>问题分布图
                </h3>
                <div class="flex items-center justify-between gap-4"
                    style="width: 100%; padding: 10px; border: 1px solid #eee;">
                    <div class="flex h-64" style="position: relative;">
                        <canvas id="issuesDistributionChartPie"></canvas>
                        <div id="centerText"
                            style="position: absolute; top: 50%; left: 43%; transform: translate(-50%, -50%); text-align: center;">
                        </div>
                    </div>
                </div>
            </div>
            <!-- 中央弹窗 (默认隐藏) -->
            <div id="approvalPopup" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
                style="display: none;">
                <div class="bg-white rounded-lg shadow-xl p-6 w-full max-w-md transform transition-all">
                    <!-- 弹窗内容 -->
                    <div class="text-center">
                        <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                            <i class="fa fa-check text-green-500 text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-bold text-gray-900 mb-2">审核完毕</h3>
                        <p class="text-gray-600 mb-6">所有项目已完成审核流程</p>

                        <!-- OK按钮 -->
                        <button id="okBtn"
                            class="inline-flex justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors">
                            OK
                        </button>
                    </div>
                </div>
            </div>
        </section>
        <!-- 详情浮窗 -->
        <div id="detailTooltip"
            class="tooltip-shadow bg-white rounded-lg p-5 absolute z-50 transition-all duration-200 opacity-0 transform translate-y-2">
            <div class="tooltip-content">
                <h3 class="tooltip-title">问题详情</h3>
                <div class="detail-item">
                    <h4>描述</h4>
                    <p id="tooltip-suggestTip" class="result-content"></p>
                </div>
                <div class="detail-item">
                    <h4>代码片段</h4>
                    <pre id="tooltip-snippetPreview" class="result-content code-snippet"></pre>
                </div>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>

</html>